<!DOCTYPE html>
<html>
<head>
	<title>Complex tabbars orientation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlxtabbar.css"/>
	<script src="../../../codebase/dhtmlxtabbar.js"></script>
	<style>
		#m_zone {
			position: relative;
			height: 200px;
			border-left: 1px solid #dfdfdf;
			border-right: 1px solid #dfdfdf;
			border-bottom: 1px solid #dfdfdf;
			overflow: hidden;
		}
	</style>
	<script>
		
		var tabbars = [];
		var tabbarsData = [
			{settings: {align: "left"}, tabs: [
				{id: "a1", text: "Tab 1"},
				{id: "a2", text: "Tab 2"}
			]},
			{settings: {align: "right"}, tabs: [
				{id: "a3", text: "Tab 3"},
				{id: "a4", text: "Tab 4", selected: 1}
			]}
		];
		
		function initTabbar(container, mode, index) {
			var tabbar = new dhtmlXTabBar(container, mode);
			
			tabbar.enableContentZone(false);
			tabbar.attachEvent("onSelect",function(id){
				for (var i=0; i<tabbars.length; i++) {
					if (tabbars[i] != this) tabbars[i].setTabInActive();
				}
				document.getElementById("m_text").innerHTML = "Selected tab: "+this.cells(id).getText();
				return true;
			});
			
			tabbar.loadStruct(tabbarsData[index]);
			
			return tabbar;
		}
		
		function doOnLoad() {
			tabbars[0] = initTabbar("tabbar_top", "top", 0);
			tabbars[1] = initTabbar("tabbar_bottom", "bottom", 1);
		}
		
	</script>
	
</head>
<body onload="doOnLoad();">
	
	<div style="position: relative; width: 450px; ">
		<div id="tabbar_top" style=" height: 43px; position: relative;"></div>
		<div id="m_zone">
			<div id="m_text" style="padding: 10px;"></div>
		</div>
		<div id="tabbar_bottom" style=" height: 43px; position: relative;"></div>
	</div>
	
	<p>enableContentZone method allows to hide content zone, so few tabbars can emulate single content zone</p>
	
</body>
</html>
